<template>
  <div class="lucky-box">
    <div class="lucky">
      <LuckyGrid
        ref="myLucky"
        width="900px"
        height="900px"
        :rows="5"
        :cols="5"
        :prizes="prizes"
        :blocks="blocks"
        :buttons="buttons"
        @start="startCallback"
        @end="endCallback"
      />
    </div>
  </div>
</template>

<script type="link">
export default {
  components: {
  },
  data () {
    return {
      blocks: [{ padding: '13px', background: '#617df2' }],
      prizes: [
        { x: 0, y: 0, fonts: [{ text: '0', top: '10%' }], background: '#b3c8fa' },
        { x: 1, y: 0, fonts: [{ text: '1', top: '10%' }], background: '#b3c8fa' },
        { x: 2, y: 0, fonts: [{ text: '2', top: '10%' }], background: '#b3c8fa' },
        { x: 3, y: 0, fonts: [{ text: '3', top: '10%' }], background: '#b3c8fa' },
        { x: 4, y: 0, fonts: [{ text: '4', top: '10%' }], background: '#b3c8fa' },
        { x: 4, y: 1, fonts: [{ text: '5', top: '10%' }], background: '#b3c8fa' },
        { x: 4, y: 2, fonts: [{ text: '6', top: '10%' }], background: '#b3c8fa' },
        { x: 4, y: 3, fonts: [{ text: '7', top: '10%' }], background: '#b3c8fa' },
        { x: 4, y: 4, fonts: [{ text: '8', top: '10%' }], background: '#b3c8fa' },
        { x: 3, y: 4, fonts: [{ text: '9', top: '10%' }], background: '#b3c8fa' },
        { x: 2, y: 4, fonts: [{ text: '10', top: '10%' }], background: '#b3c8fa' },
        { x: 1, y: 4, fonts: [{ text: '11', top: '10%' }], background: '#b3c8fa' },
        { x: 0, y: 4, fonts: [{ text: '12', top: '10%' }], background: '#b3c8fa' },
        { x: 0, y: 3, fonts: [{ text: '13', top: '10%' }], background: '#b3c8fa' },
        { x: 0, y: 2, fonts: [{ text: '14', top: '10%' }], background: '#b3c8fa' },
        { x: 0, y: 1, fonts: [{ text: '15', top: '10%' }], background: '#b3c8fa' },
      ],
      buttons: [{
        x: 2,
        y: 2,
        background: '#7f95d1',
        fonts: [{ text: '开始', top: '10%' }]
      }],
    };
  },
  mounted () {
    // this.$refs.driftingSnow.showFn();
  },
  methods: {
    // 点击抽奖按钮会触发star回调
    startCallback () {
      // 调用抽奖组件的play方法开始游戏
      this.$refs.myLucky.play()
      // 模拟调用接口异步抽奖
      setTimeout(() => {
        // 假设后端返回的中奖索引是0
        const index = Math.floor(Math.random() * this.prizes.length)

        // 调用stop停止旋转并传递中奖索引
        this.$refs.myLucky.stop(index)
      }, 3000)
    },
    // 抽奖结束会触发end回调
    endCallback (prize) {
      console.log(prize)
    },
  }
};
</script>

<style scoped>
.lucky-box {
  position: relative;
  height: calc(100vh - 100px);
}
.lucky {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
